<?php
/**
 * Created by PhpStorm.
 * Author: QinShuai
 * Email: qinshuai0423@qq.com
 * Date: 2021/6/11
 */


/* @var $this yii\web\View */
/* @var $list yii\web\View */
$controller = $this->context->id;

$this->title = '通用后台管理';
?>
<div class="index">
    <!--搜索-->
    <div class="search">
        <div class="section-body">
            <!--搜索-->
            <el-form label-width="100px" label-position="left">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="用户名：">
                            <el-input
                                    placeholder="请输入内容"
                                    v-model="searchData.username"
                                    clearable>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="时间：">
                            <el-date-picker
                                    v-model="searchData.times"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-button type="primary" icon="el-icon-search" @click="searchInput">搜索</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
    <!--按钮-->
    <div class="button">
        <el-row>
            <el-button type="success" @click="handleAdd">添加</el-button>
            <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>

        </el-row>
    </div>

    <div class="content">
        <template>
            <!--表格-->
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    height="100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="ID"
                        sortable
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="角色"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDeleteConfirm(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <el-row type="flex" class="page" justify="end">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="pageSizes"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="count">
                </el-pagination>
            </el-row>
        </template>
        <el-dialog
                title="添加/编辑"
                :visible.sync="centerDialogVisible"
                width="50%"
                center>
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item hidden>
                    <el-input v-model="form.id"></el-input>
                </el-form-item>
                <el-form-item label="用户名称：">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码：">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>

                <el-form-item label="用户邮箱：">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="用户角色：">
                    <el-select v-model="form.role_id" placeholder="请选择">
                        <el-option
                                v-for="item in roles"
                                :key="item.value"
                                :label="item.name"
                                :value="item.id"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图片：">
                    <el-upload
                            action="/upload/index"
                            :data = "{'type':'test'}"
                            name="imageFile"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="用户状态：">
                    <el-radio-group v-model="form.status">
                        <el-radio label="10">启用</el-radio>
                        <el-radio label="9">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</div>
<?php $this->beginBlock('js'); ?>
<script>
    App = {
        data: {
            form: {
                id: '',
                username: '',
                password: '',
                email: '',
                status: '10',
                desc: '',
                role_id: ''
            },
            searchData: {
                username: '',
                times: [new Date(2021, 10, 10, 10, 10), new Date(2021, 10, 11, 10, 10)],
            },
            roles:<?php echo $this->params['data']['roles'] ?? []?>,
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            afterHandleAdd() {
                this.form.status = '10';
            },
            beforeSaveValidate(that) {
                if (that.form.username == '') {
                    that.$error('请填写用户名');
                    return false;
                }
                if (that.form.email == '') {
                    that.$error('请填写邮箱');
                    return false;
                }
                if (that.form.role_id == '') {
                    that.$error('请选择角色');
                    return false;
                }
            }
        }
    }
</script>
<?php $this->endBlock(); ?>
